<!-- 小轮播图新闻 -->
<template>
 <!-- <div> -->
  <el-button type="primary" @click="add('add')" style="margin-bottom: 10px;">新增</el-button>

<el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
  <el-table-column prop="id" label="文件id"  width="100"  />
  <!-- <el-table-column prop="name" label="文件名称	" width="200"  /> -->
  <!-- <ma-dict-column prop="url" label="文件路径	" dict-type="link_type"  width="200"   ></ma-dict-column> -->
 
  
     <!-- <el-table-column label="文件路径" header-align="center" align="center" width="100">
       <template #default="scope">
       <el-button type="text" @click="showAttachment(scope.row.url)">查看</el-button>
       </template>
     </el-table-column>  -->
 
  <el-table-column prop="title" label="标题"    width="100" />
  <el-table-column prop="content" label="内容"  width=""  />
  <el-table-column prop="updator" label="更新者	" width="100"   />
  <el-table-column prop="" label="操作"   fixed="right" width="200" >
    <template #default="scope">
      <el-button type="primary" @click="add('edit',scope.row)">编辑</el-button>
      <el-button type="danger" @click="deleteBatchHandle(scope.row.id)">删除</el-button>

      <!-- <el-button type="danger" @click="deleteColumn(scope.row)">删除</el-button> -->
    </template>
  </el-table-column>
</el-table>
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
<CarouselNewsFrom ref="dialogFormRef" @resetList="getList"></CarouselNewsFrom>

<el-dialog
   v-model="dialogVisible"
   title="预览"
   width="900"
   :before-close="handleClose"
 >

   <div v-if="attachmentType === 'image'">
       <img :src="currentAttachmentUrl" alt="预览" style="    width: 700px;    margin: 0 6rem; height: auto;" />
     </div>
     <div v-else-if="attachmentType === 'video'">
       <video :src="currentAttachmentUrl" controls style="max-width: 100%; height: auto;"></video>
     </div>
     <div v-else>
       <p>不支持的文件类型。</p>
     </div>

 </el-dialog>

 <!-- </div> -->

</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listLink, editLink, deleteLink ,CarouselNewsList,sandelete} from '@/api/allApi'
import CarouselNewsFrom  from './CarouselNewsFrom.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { useCrud } from '@/hooks'
import { IHooksOptions } from '@/hooks/interface'


const state: IHooksOptions = reactive({
	deleteUrl: '/industryInnovation/delete',
})



const { deleteBatchHandle} = useCrud(state)

// let tableData = reactive([])
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数

//   获取页面有多少条数据
const addpagenum = ref("")
const data = reactive({
   tableData: []
})

onMounted(() => {
   getList()
})

// 初始化  获取数据ok
const getList = () => {
 CarouselNewsList({
       websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
       page: pageNum.value,
       size: pageSize.value
   }).then((res: any) => {
      data.tableData= res.data.list
     console.log(  data.tableData,'asadadadqqqqqqqqqqqqqqqqqqq')  


   })
}


const dialogFormRef = ref()
const add = (type: string, row: any) => {
  dialogFormRef.value.init(type, row)
  // console.log(addpagenum.value,'asadadadqqqqqqqqqqqqqqqqqqq')  

}




const dialogVisible = ref(false)
const currentAttachmentUrl = ref('')
const attachmentType = ref('')
const showAttachment = (url: string) => {

attachmentType.value = getFileTypeFromUrl(url);
currentAttachmentUrl.value = url;
dialogVisible.value = true;

console.log(  currentAttachmentUrl.value)
};

const getFileTypeFromUrl = (url: string): string => {
const ext = url.split('.').pop()?.toLowerCase() ?? '';
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(ext)) {
  return 'image';
} else if (['mp4', 'webm', 'ogg'].includes(ext)) {
  return 'video';
} else {
  return 'unsupported';
}
};

const handleClose = () => {
dialogVisible.value = false;
currentAttachmentUrl.value = '';
attachmentType.value = '';
};






</script>

<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
   width: max-content;
   display: inline-block;
}
</style>
